<template>
	<scroll-view @scrolltolower="handleScrolltolower" enable-flex scroll-y class="home_category">
        <view class="cate_item"
		v-for="(item,index) in newgory"
		:key="item.id"
		>
		<go-detail :list="newgory" :index="index">
				<image mode="aspectFill" :src="item.img"></image>
		</go-detail>
			
		</view> 
	</scroll-view>
</template>
 
<script>
import goDetail from "@/components/goDetail"
	export default {
		components:{
			goDetail
		},
		data(){
			return{
				category:[],
				id:0,
				newgory:[],
				params:{
					limit:1,
					skip:0,
					order:'new'
				},
				hasMore:true,
			}
		},
		mounted(){
			this.getList();
		},
		methods:{
			getList(){
				this.request({
					url: 'http://service.picasso.adesk.com/v1/vertical/category'
				})
				.then(result=>{
					this.category = result.res.category;
					// console.log(this.category);
					this.category.forEach(v=>{
							this.id = v.id
							// console.log(this.id);
							this.getNew();
					})

				})
			},
			getNew(){
				this.request({
								url: `http://service.picasso.adesk.com/v1/vertical/category/${this.id}/vertical`,
								data:this.params
							})
							.then(result=>{
							// console.log(result);
							if(result.res.vertical.length === 0){
								this.hasMore=false;
								uni.showToast({title:'我也是有底线的',icon:'none'})
								return;
							}
							this.newgory=[...this.newgory,...result.res.vertical];
							// console.log(this.newgory);
							})
			},
			handleScrolltolower(){
				// console.log("1111");
				if(this.hasMore){;
					this.params.skip += this.params.limit;
					this.getList();
				}else{
					uni.showToast({title:'已经尽力了喔~~',icon:'none'})
				}
			}
			
		}
	}
</script>

<style lang="scss" scoped>
.home_category {
	display: flex;
	flex-wrap: wrap;
	height: calc(100vh - 50px);
  .cate_item {
	  width: 33.33%;
	  position: relative;
    image {
		height: 240rpx;

    }

    .cate_name {
		position: absolute;
		width: 100%;	
		height: 60rpx;
		left: 0;
		bottom: 0;
		color: #fff;
		font-size: 40rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		background-image: linear-gradient(to right top,rgba(0,0,0,.2),rgba(0,0,0,0));

    }
  }
}
	
</style>